<template>
  <div class="container">
    <div
      class="btn"
      id="btn"
      ref="btn"
      :style="{ visibility: suspendBallVisible ? 'visible' : 'hidden' }"
      v-drag="{ set: hidden }"
      draggable="false"
      @touchstart='touchStart'
      @touchmove='touchMove'
      @touchend='touchEnd'
    >
      <img :src="require(`../../assets/images/${imgsrc}`)" alt="" />
    </div>
    <toast :text="toastText" ref="toast"></toast>
  </div>
</template>
<script>
import { ebookMixin, storeShelfMixin } from '@/utils/mixin'
import Toast from '../common/Toast.vue'
import { closeHandControl } from '@/api/store'
export default {
  mixins: [storeShelfMixin, ebookMixin],
  components: { Toast },
  data () {
    return {
      toastText: '',
      imgSrc: 'hands.png',
      handData: null,
      firstX: 0, // 开始触摸的位置
      firstY: 0,
      moveX: 0, // 滑动时的位置
      moveY: 0,
      endX: 0, // 结束触摸的位置
      endY: 0,
      disX: 0, // 移动距离
      disY: 0,
      l: 0,
      t: 0
    }
  },
  computed: {
    imgsrc () {
      return this.handState === 1 ? 'right.png' : this.handState === 2 ? 'left.png' : this.handState === 3 ? 'shrink.png' : this.handState === 5 ? 'enlarge.png' : 'hands.png'
    }
  },
  sockets: {
    connect () {
      console.log('链接成功')
    },
    disconnect () {
      this.setSuspendBallVisible(false)
      console.log('断开链接')
    }
  },
  mounted () {
    // 初始化按钮位置
    const clientW = document.documentElement.clientWidth
    const clientH = document.documentElement.clientHeight
    const div = document.getElementById('btn')
    div.style.top = clientH / 2 + 'px'
    div.style.left = clientW - 80 + 'px'
  },
  methods: {
    touchStart: function (ev) {
      const e = ev || event
      e.preventDefault()
      if (e.touches.length === 1) { // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        const oDiv = this.$refs.btn
        // 鼠标按下，计算当前元素距离可视区的距离
        this.disX = e.touches[0].clientX - oDiv.offsetLeft
        this.disY = e.touches[0].clientY - oDiv.offsetTop
        // 记录初始位置
        this.firstX = oDiv.offsetLeft
        this.firstY = oDiv.offsetTop
        this.l = oDiv.offsetLeft
        this.t = oDiv.offsetTop
      }
    },
    touchMove: function (ev) {
      const e = ev || event
      e.preventDefault()

      if (e.touches.length === 1) {
        const oDiv = this.$refs.btn
        this.l = e.touches[0].clientX - this.disX
        this.t = e.touches[0].clientY - this.disY
        // 移动当前元素
        oDiv.style.left = this.l + 'px'
        oDiv.style.top = this.t + 'px'
      }
    },
    touchEnd: function (ev) {
      const e = ev || event
      e.preventDefault()
      if (e.changedTouches.length === 1) {
        const oDiv = this.$refs.btn
        // 点击事件
        if (Math.abs(this.l - this.firstX) < 3 || Math.abs(this.t - this.firstY) < 3) {
          this.hidden()
        } else {
          // 拖拽事件
          const clientW = document.documentElement.clientWidth
          const clientH = document.documentElement.clientHeight
          // 判断偏移量,并吸壁
          // 垂直偏移量大于水平偏移量，上下吸壁，水平控制范围
          if (Math.abs(this.t - this.firstY) > Math.abs(this.l - this.firstX)) {
            // 上下吸壁，水平控制范围
            if (this.t > clientH / 2) {
              this.t = clientH - 55
            } else {
              this.t = 5
            }
            if (this.l < 55) this.l = 55
            else if (this.l > clientW - 55) this.l = clientW - 55
          } else {
            if (this.l > clientW / 2) {
              this.l = clientW - 55
            } else {
              this.l = 5
            }
            if (this.t < 55) this.t = 55
            else if (this.t > clientH - 55) this.t = clientH - 55
          }
          oDiv.style.top = this.t + 'px'
          oDiv.style.left = this.l + 'px'
        }
      }
    },
    hidden () {
      closeHandControl().then((res) => {
        console.log(res.data)
        this.toastText = this.$t('shelf.closeHandSuccess')
        this.$refs.toast.updateText(this.toastText)
        this.$refs.toast.show()
      })
      this.setSuspendBallVisible(false)
    }
  },
  directives: {
    drag (el, binding) {
      const oDiv = el
      // 禁止选择网页上的文字
      document.onselectstart = function () {
        return false
      }
      oDiv.onmousedown = function (e) {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        // 记录初始位置
        const firstX = oDiv.offsetLeft
        const firstY = oDiv.offsetTop
        let l = oDiv.offsetLeft
        let t = oDiv.offsetTop
        console.log(disX, disY, firstX, firstY, l, t)
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          l = e.clientX - disX
          t = e.clientY - disY
          // 移动当前元素
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function (e) {
          // 点击事件
          if (Math.abs(l - firstX) < 1 || Math.abs(t - firstY) < 1) {
            binding.value.set(true)
          } else {
            // 拖拽事件
            const clientW = document.documentElement.clientWidth
            const clientH = document.documentElement.clientHeight
            // 判断偏移量,并吸壁
            // 垂直偏移量大于水平偏移量，上下吸壁，水平控制范围
            if (Math.abs(t - firstY) > Math.abs(l - firstX)) {
              // 上下吸壁，水平控制范围
              if (t > clientH / 2) {
                t = clientH - 55
              } else {
                t = 5
              }
              if (l < 55) l = 55
              else if (l > clientW - 55) l = clientW - 55
            } else {
              if (l > clientW / 2) {
                l = clientW - 55
              } else {
                l = 5
              }
              if (t < 55) t = 55
              else if (t > clientH - 55) t = clientH - 55
            }
            oDiv.style.top = t + 'px'
            oDiv.style.left = l + 'px'
          }
          document.onmousemove = null
          document.onmouseup = null
        }
        // return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  .btn {
    z-index: 500000;
    position: fixed;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border: 1px solid #ffffff00;
    border-radius: 10px;
    background: #b894b06e;
    box-shadow:  5px 5px 10px #b894b06e;
    text-align: center;
    img {
      margin: 5px 0;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
